<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/vip.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div style="display: flex;justify-content: space-between;">
            <a href="recommend.html" class="iconfont iconfanhui1" style="font-size:0.55rem;"></a>
            <a href="#" style="font-size:0.35rem;line-height: 0.55rem;">专题</a>
            <a href="#" style="font-size:0.55rem;line-height: 0.55rem" class="iconfont iconshangchuan"></a>
        </div>
        <div style="display: flex;font-size: 0.35rem;color: #fff;">
            <img src="img/小老鼠.jpg" alt="" style="border-radius: 50%;margin-left: 0.2rem;">
            <div style="display: flex;flex-direction: column;margin-top: 0.4rem;margin-left: 0.3rem;">
                <p style="margin-bottom:0.1rem;">莫相识</p>
                <p style="font-size: 0.3rem">未开通特权</p>
            </div>
        </div>
    </header>
    <div class="bg_box">
        <p class="ptag"><span>您想购买多久的艺伙会员呢？</span></p>
        <div class="box">
            <dl>
                <dd>包年</dd>
                <dt>￥365</dt>
            </dl>
            <dl>
                <dd>包季</dd>
                <dt>￥120</dt>
            </dl>
            <dl>
                <dd>包月</dd>
                <dt>￥45</dt>
            </dl>
        </div>
        <div class="box1">
            <a href="#">立即开通</a>
            <p style="margin: 0.2rem 0;">《会员服务协议》</p>
        </div>
    </div>

    <div class="excl" style="font-size: 0.32rem;margin-left: 0.3rem;">
        <i style="display: inline-block;width: 0.08rem;height: 0.34rem;background: #EEC14F"></i> <span>加入VIP会员专属权益</span>
    </div>

    <!-- 内容区域 -->
    <section>
        <div class="s-box">
            <img src="img/小书书.jpg" alt="" style="width: 0.72rem;height:0.66rem;">
            <dl style="margin-right: 0.5rem;">
                <a href="#"><dt style="font-size: 0.35rem;">轻松入门免费学</dt></a>
                <dd style="margin-top: 0.1rem;color: #bbb">在这里，所有艺术入门课程全部免费</dd>
            </dl>
        </div>
        <div class="s-box">
            <img src="img/mv.jpg" alt="" style="width: 0.72rem;height:0.66rem;">
            <dl>
                <a href="#"><dt style="font-size: 0.35rem;">大咖直播免费学</dt></a>
                <dd style="margin-top: 0.1rem;color: #bbb">私享会，中国顶级大咖独家分享艺术精妙</dd>
            </dl>
        </div>
        <div class="s-box">
            <img src="img/￥.jpg" alt="" style="width: 0.72rem;height:0.66rem;">
            <dl>
                <a href="#"><dt style="font-size: 0.35rem;">更多折扣</dt></a>
                <dd style="margin-top: 0.1rem;color: #bbb">最超值，深度艺术提升课程享受九折优惠</dd>
            </dl>
        </div>
    </section>
</body>

</html>